<template>
  <div class="frame">
    <!-- @mousewheel.prevent -->
    <!-- 头部区域 -->
    <div class="frame-header">
      <div class="title">在线茶叶销售后台管理系统</div>
    </div>
    <!-- 侧边栏和主体 -->
    <div class="frame-body">
      <!-- 侧边栏导航 -->
      <div class="left_body">
        <el-menu class="el-menu-demo" default-active="/user" :router="true">
          <el-menu-item index="/user">
            <el-icon>
              <Memo size="20" />
            </el-icon>
            <span>用户管理</span>
          </el-menu-item>

          <el-menu-item index="/goods">
            <el-icon>
              <Memo size="20" />
            </el-icon>
            <span>商品管理</span>
          </el-menu-item>

          <el-menu-item index="/order">
            <el-icon>
              <Memo size="20" />
            </el-icon>
            <span>订单管理</span>
          </el-menu-item>
        </el-menu>
      </div>
      <!-- 主体数据 -->
      <div class="right_body">
        <router-view />
      </div>
    </div>
  </div>
</template>
<script>
import { ArrowDown, UserFilled } from '@element-plus/icons-vue'

export default {
  created() { },
  data() {
    return {
      loading: false,
    };
  },
  components: {
    ArrowDown,
    UserFilled,
  },
  methods: {},
};
</script>


<style scoped>
.frame {
  width: 100%;
  white-space: nowrap;
}

.pointer:hover {
  cursor: pointer;
}

.frame-header {
  height: 80px;
  line-height: 80px;
  background-color: white;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
}

.title {
  margin-left: 35px;
  font-size: 24px;
}

.frame-body {
  height: 100%;
  display: flex;
}

.left_body {
  width: 200px;
  min-height: calc(100vh - 82px);
  margin-right: 2px;
  background-color: white;
}

.right_body {
  /* width: calc(100vh - 202px); */
  flex: 1;
  background-color: white;
  padding: 20px;
}
</style>
